<template>
  <div>
    <div class="upload-item"
         v-for="(item,index) in images2"
         :key="index">
      <img :src="item.url"
           @click="previewImg(item.url)"
           :preview="preview"
           alt="">
      <span
            @click="removeImg(item.name,index,item)"></span>
    </div>
    <div class="upload-item">
      <img src="@static/images/upload.png"
           alt="">
      <input type="file"
             :name="('file'+uploadIndex)"
             @change="upload">
    </div>
     <!-- <el-dialog :visible.sync="flag" >
       <img :src="selectImg" alt="" width="100%">
     </el-dialog> -->
  </div>
</template>
<script>
export default {
  name: "upload",
  data() {
    return {
      selectImg:'',
      flag:false,
      uploadImgs: [], // 图片上传回传的照片
      preview: "", // 预览图片分组
      // uploadImgs: [], // 图片上传回传的照片
      uploadImgFormData: null, // 图片上传formData对象
      uploadIndex: 0,
      baseurl: this.$axiosAjax.baseurl,
      images2: []
    };
  },
  props: {
    imgList: {
      default: ""
    },
    images: {
      default: () => []
    },
    uploadImgss: {
      default: () => []
    }
  },
  mounted(){
    this.uploadImgs=this.imgList
  },
  watch: {
    uploadImgss(val) {
      debugger;
      if (val) {
        val.forEach(item => {
          this.uploadImgs.push(item);
        });
      }
    },
    created() {
      debugger;
      this.uploadImgs = this.uploadImgss;
      this.preview = new Date().getTime();
      this.imgList.forEach(item => {
        this.uploadImgs.push(item);
      });
    }
  },
  methods: {

    previewImg(url){//图片预览
      this.selectImg=url
      this.flag=true
    },
      // 上传
    upload(e) {
      let file = e.target.files[0];
      let param = new FormData();
      param.append("file", file);
      param.append('recordId',this.$store.state.illegalDepartId);
      param.append('type',5);
      // 上传弹框提示
      this.$vux.loading.show({
        text: '上传中...'
      });
      this.$axiosAjax.illegalUpload(param).then(res => {
          if (res.data.success){
              this.images2.push({
                name: res.data.result.fileName,
                size: res.data.result.fileSize,
                url: this.baseurl+'/'+res.data.result.relativePath,
                id:res.data.result.id,
              });
            this.$emit("setFormData", this.images2.length, this.images2);
            this.$vux.loading.hide();
          } else {
            this.$vux.loading.hide();
            this.$vux.alert.show({
              content: '上传失败，请重试！',
              dialogTransition: ''
            });
          }
      }).catch(err => {
        this.$vux.loading.hide();
      });
    },
    // 删除
    removeImg(name, index,item) {
        var ids = {}
        var id=[]
        id.push(item.id)
        ids.id=id
        this.images2.splice(index, 1);
        this.$emit("setFormData", this.images2.length, this.images2);
        // 删除弹框提示
        this.$vux.loading.show({
          text: '删除中...'
        });
        this.$axiosAjax.illegalDelete(ids).then(res => {
            if (res.data.success == true) {
                this.$forceUpdate();
                this.$vux.loading.hide();
            } else {
              this.$vux.loading.hide();
              this.$vux.alert.show({
                content: '删除失败，请重试！',
                dialogTransition: ''
              });
            }
        }).catch(err => {
            this.$vux.loading.hide();
        });
    }
  }
};
</script>
<style>
</style>
